<template>
	<view class="container">
		<icon>图片</icon>
		<evan-form :model="userInfo" :rules="rules" ref="form">
			<evan-form-item prop="username">
			<view class="view">
			  <label class="label">账号</label>
			  <input class="input" placeholder="请输入账号" v-model="userInfo.username"></input>
			</view>
			</evan-form-item>
			
			<evan-form-item prop="password">
			<view class="view">
			  <label class="label">密码</label>
			  <input class="input" placeholder="请输入密码" v-model="userInfo.password"></input>
			</view>
			</evan-form-item>
		</evan-form>
		<button type="primary" @click="loginBtnTap">登录</button>
		
	</view>
</template>

<script>
	import evanForm from "../../components/evan-form/evan-form.vue"
	import evanFormItem from "../../components/evan-form-item/evan-form-item.vue"
	
	export default {
		components:{
				evanForm,evanFormItem
		},
		mounted() {
			this.$refs.form.setRules(this.rules)
		},
		data() {
			return {
				userInfo: {
				      username: 'wangfeng',
				      password: 'wangfeng123',
					  // key:'fd222fe687e3a416c0e6161449fac2f8'
				    },
					rules:{
						username: [{
							required: true,
							message: '请输入手机号'
						}],
						password: [{
							required: true,
							message: '请输入密码'
						}]
					}
			}
		},
		onLoad() {
			const token = this.$store.getters.token
			if(token){
			  this.loginByToken();
			}
		},
		onReady() {
			
		},
		methods: {
			loginByToken(){
			    uni.showLoading({
			      title: '加载中',
			    })
				this.$store.dispatch('loginByToken').then(() => {
				  uni.switchTab({
					url:"../main/main"
				  })
				}).catch(e => {
				  uni.hideLoading()
				})
				
			  },
			loginBtnTap(){
				this.$refs.form.validate((res) => {
						if (res) {
							uni.showToast({
								title: '验证通过'
							})
							this.$store.dispatch('logintap', this.userInfo).then(() => {
							  uni.switchTab({
								url:"../main/main"
							  })
							}).catch(e => {
							})
						}
					})
				
				// this.$api.login(this.userInfo).then(res => {
				//    // 获得数据 
				//    console.log(res) 
				   
				   
				// }).catch(res => {
				// 　　// 失败进行的操作
				// 	console.log(res) 
				// 	// uni.switchTab({
				// 	// 	url:"../main/main"
				// 	// })
				// })
			}
		}
	}
</script>

<style lang="scss">
	.container { 
		.view {
		  width: calc(100% - 16rpx);
		  margin-left: 8rpx;
		  margin-right: 8rpx;
		  display: inline-block;
		  height: 80rpx;
		  line-height: 100rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  
		  .input{
		    display: inline-block;
		    margin-left: 30rpx;
		    border-bottom: 1px solid gray;
		  }
		  .label{
		    color: #333333;
		  }
		}
		
		button{
			width: 60%;
			color: #333333;
			margin-top: 50rpx;
		}
	}
</style>
